<template>
    <div class="fwsx">
        <div class="title"></div>
        <div class="cnt">
            <img class="bg line-l" src="@/assets/home/lineL.png">
            <img class="bg icon" src="@/assets/home/fwsx.png">
            <img class="bg line-r" src="@/assets/home/lineR.png">
            <ul>
                <li>
                    <p class="name">依申请行政权力事项数</p>
                    <p class="num">{{ fwData.qlMatter || 0 }}</p>
                </li>
                <li>
                    <p class="name">政务服务2.0事项数</p>
                    <p class="num">{{ fwData.zwfwMatter || 0 }}</p>
                </li>
                <li>
                    <p class="num">{{ fwData.ggfwMatter || 0 }}</p>
                    <p class="name">依申请公共服务事项数</p>
                </li>
                <li>
                    <p class="num">{{ fwData.fsbjMatter || 0 }}</p>
                    <p class="name">2.0发生办件事项数</p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: "fwsx",
    props: {
        fwData: {
            type: Object,
            default: () => ({})
        }
    },
    data(){
        return {

        }
    },
}
</script>

<style lang="scss" scoped>
.title{
    width: 450px;
    height: 48px;
    background: url("~@/assets/home/right1.png") no-repeat;
    background-size: 100% 100%;
}
.cnt{
    position: relative;
    margin: 36px 0 32px 0;
    .bg{
        position: absolute;
        width: 153px;
        height: 2px;
    }
    .line-l{
        top: 50%;
        left: 25px;
        transform: translateY(-50%);
    }
    .icon{
        width: 112px;
        height: 112px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
    }
    .line-r{
        top: 50%;
        right: 36px;
        transform: translateY(-50%);
    }
    ul{
        display: flex;
        flex-wrap: wrap;
        padding: 0 41px 0 30px;
        li{
            width: 50%;
            &:nth-child(-n+2){
                margin-bottom: 34px;
                .num{
                    margin: 2px 0 0;
                }
            }
            &:nth-child(even){
                p{
                    text-align: right;
                }
            }
            .num{
                margin: 0 0 2px;
                color: rgba(255, 255, 255, 1);
                font-family: "Source Han Sans CN";
                font-weight: 500;
                font-size: 24px;
                line-height: 36px;
                letter-spacing: 2.4px;
            }
            .name{
                color: rgba(214, 255, 255, 1);
                font-family: "Source Han Sans CN";
                font-weight: 500;
                font-size: 16px;
                line-height: 24px;
            }
        }
    }
}
</style>